<template>
  <div>
    <el-dialog :visible="visible" v-bind="$attrs" :title="form.id?'编辑部门':'新增部门'" v-on="$listeners" @open="onOpen" @close="onClose">
      <el-form ref="formRef" :model="form" :rules="rules" size="medium" label-width="100px">
        <el-form-item label="部门名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入部门名称" clearable :style="{width: '100%'}" />
        </el-form-item>
        <el-form-item label="部门编码" prop="code">
          <el-input v-model="form.code" placeholder="请输入部门编码" clearable :style="{width: '100%'}" />
        </el-form-item>
        <el-form-item label="负责人" prop="manager">
          <el-select v-model="form.manager" placeholder="请选择负责人" clearable :style="{width: '100%'}">
            <el-option
              v-for="(item, index) in managerOptions"
              :key="index"
              :label="item.username"
              :value="item.username"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="部门介绍" prop="introduce">
          <el-input
            v-model="form.introduce"
            type="textarea"
            placeholder="请输入部门介绍"
            :autosize="{minRows: 4, maxRows: 4}"
            :style="{width: '100%'}"
          />
        </el-form-item>
      </el-form>
      <el-row slot="footer" type="flex" justify="center">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import { getList, addDepet, updateDepet } from '@/api/departments'
import { getEmployeeSimple } from '@/api/employees'
export default {
  components: {},
  inheritAttrs: false,
  props: {
    visible: {
      type: Boolean,
      required: true
    },
    node: {
      type: Object,
      required: true
    }
  },
  data() {
    const checkName = async(rule, value, callback) => {
      let brothers
      if (this.form.id) {
        // 編輯
        const allDepts = (await getList()).depts
        brothers = allDepts.filter(t => t.pid !== this.form.pid && t.id !== this.form.id)
      } else {
        // 新增
        brothers = this.node.children || []
      }
      brothers = this.node.children || []
      const f = brothers.find(t => t.name === value)
      if (!f) {
        callback()
      } else {
        callback(new Error('存在重复名称的兄弟部门'))
      }
    }
    const checkCode = async(rule, value, callback) => {
      const allDepts = (await getList()).depts
      let f
      if (this.form.id) {
        // 編輯
        f = allDepts.filter(t => t.id !== this.form.id).find(t => t.code === value)
      } else {
        // 新增
        f = allDepts.find(t => t.code === value)
      }

      if (!f) {
        callback()
      } else {
        callback(new Error('存储重复编号的部门'))
      }
    }
    return {
      form: {
        name: undefined,
        code: undefined,
        manager: undefined,
        introduce: undefined
      },
      rules: {
        name: [
          { required: true, message: '请输入部门名称', trigger: 'blur' },
          { min: 1, max: 50, message: '请输入1-50个字符', trigger: 'blur' },
          { validator: checkName, trigger: 'blur' }
        ],
        // 部门编码在整个部门中不允许重复
        code: [
          { required: true, message: '请输入部门编码', trigger: 'blur' },
          { min: 1, max: 50, message: '请输入1-50个字符', trigger: 'blur' },
          { validator: checkCode, trigger: 'blur' }
        ],
        manager: [
          { required: true, message: '请选择负责人', trigger: 'change' }
        ],
        introduce: [
          { required: true, message: '请输入部门介绍', trigger: 'blur' },
          { min: 1, max: 300, message: '请输入1-300个字符', trigger: 'blur' }
        ]
      },
      managerOptions: []
    }
  },
  computed: {},
  watch: {},
  created() {
    this.EmployeeSimple()
  },
  mounted() {},
  methods: {
    onOpen() {},
    onClose() {
      // 对整个表单进行重置
      // 将所有字段的值设置为初始值
      // 初始值-最开始为from最开始的值
      this.$refs['formRef'].resetFields()
    },
    close() {
      this.$emit('update:visible', false)
    },
    handelConfirm() {
      this.$refs['formRef'].validate(async valid => {
        if (!valid) return
        if (this.form.id) {
          // 编辑
          await updateDepet({
            ...this.form, pid: this.node.id
          })
        } else {
          // 新增
          await addDepet({
            ...this.form, pid: this.node.id
          })
        }

        this.$message.success('操作成功')
        this.$emit('success')
        this.close()
      })
    },
    async EmployeeSimple() {
      this.managerOptions = await getEmployeeSimple()
    }
  }
}

</script>
<style>
</style>
